<!-- filepath: c:\Users\Administrator\Documents\z.project\git\auto-web-testing-management-framework\frontend\src\views\Dashboard.vue -->
<template>
  <div class="bg-darker text-white h-screen flex flex-col">
    <!-- Header -->
  <header class="bg-dark border-b border-gray-700 py-3 px-4 flex items-center justify-between">
          <div class="flex items-center space-x-4">
              <button class="lg:hidden text-gray-400 hover:text-white">
                  <i class="fa fa-bars text-xl"></i>
              </button>
              <div class="flex items-center">
                  <div class="w-8 h-8 rounded-md bg-primary flex items-center justify-center mr-2">
                      <i class="fa fa-cogs text-white"></i>
                  </div>
                  <h1 class="text-xl font-bold text-white">PowerOne</h1>
              </div>
          </div>
          <div class="flex items-center space-x-6">
              <div class="relative">
                  <input type="text" placeholder="搜索项目、用例..." class="bg-dark-card rounded-full py-1.5 px-4 pl-10 text-sm w-48 lg:w-64 focus:outline-none focus:ring-2 focus:ring-primary/50">
                  <i class="fa fa-search absolute left-4 top-2.5 text-gray-400"></i>
              </div>
              <div class="flex items-center space-x-3">
                  <button class="relative text-gray-400 hover:text-white">
                      <i class="fa fa-bell text-xl"></i>
                      <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
                  </button>
                  <div class="flex items-center space-x-2">
                      <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=100&amp;q=80" alt="User Avatar" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
                      <span class="hidden md:inline text-sm font-medium">测试管理员</span>
                  </div>
              </div>
          </div>
      </header>


    <div class="flex flex-1 overflow-hidden">
      <!-- Sidebar -->
      <aside class="bg-dark w-16 lg:w-64 border-r border-gray-700 flex flex-col transition-all duration-300">
        <nav class="flex-1 py-4 overflow-y-auto scrollbar-hide">
          <ul class="space-y-1 px-2">
            <li>
              <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg bg-primary/10 text-primary">
                <i class="fa fa-tachometer text-xl w-6 text-center"></i>
                <span class="lg:inline text-sm font-medium">控制台</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white custom-transition-colors">
                <i class="fa fa-folder-open text-xl w-6 text-center"></i>
                <span class="lg:inline text-sm font-medium">项目管理</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white custom-transition-colors">
                <i class="fa fa-list-alt text-xl w-6 text-center"></i>
                <span class="lg:inline text-sm font-medium">测试用例</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white custom-transition-colors">
                <i class="fa fa-play-circle text-xl w-6 text-center"></i>
                <span class="lg:inline text-sm font-medium">测试执行</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white custom-transition-colors">
                <i class="fa fa-bar-chart text-xl w-6 text-center"></i>
                <span class="lg:inline text-sm font-medium">测试报告</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white custom-transition-colors">
                <i class="fa fa-bug text-xl w-6 text-center"></i>
                <span class="lg:inline text-sm font-medium">缺陷管理</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white custom-transition-colors" @click="openTaskManager">
                <i class="fa fa-tasks text-xl w-6 text-center"></i>
                <span class="lg:inline text-sm font-medium">任务管理</span>
              </a>
            </li>
          </ul>

          <div class="mt-8 px-4">
            <h3 class="text-xs uppercase text-gray-500 font-semibold px-4 mb-3 lg:inline">最近项目</h3>
            <a href="#" class="text-primary text-xs hover:underline lg:hidden block text-center mb-3">查看全部</a>
            <ul class="space-y-1">
              <li>
                <a href="#" class="flex items-center space-x-3 px-4 py-2 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors text-sm">
                  <span class="w-2 h-2 rounded-full bg-success"></span>
                  <span class="truncate lg:inline">电商平台UI自动化</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center space-x-3 px-4 py-2 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors text-sm">
                  <span class="w-2 h-2 rounded-full bg-warning"></span>
                  <span class="truncate lg:inline">供应链管理系统</span>
                </a>
              </li>
              <li>
                <a href="#" class="flex items-center space-x-3 px-4 py-2 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors text-sm">
                  <span class="w-2 h-2 rounded-full bg-danger"></span>
                  <span class="truncate lg:inline">财务报表系统API</span>
                </a>
              </li>
            </ul>
          </div>
        </nav>

        <div class="p-4 border-t border-gray-700">
          <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors">
            <i class="fa fa-cog text-xl w-6 text-center"></i>
            <span class="lg:inline text-sm font-medium">系统设置</span>
          </a>
        </div>
      </aside>
      <!-- Main Content -->
      <main class="flex-1 overflow-y-auto p-6 bg-darker">
        <div class="w-full">
          <!-- Page Header -->
          <div class="mb-8">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-white">控制台</h2>
            <p class="text-gray-400 mt-1">欢迎回来！查看您的测试项目状态和最近活动</p>
          </div>
          <!-- Quick Stats -->
          <div class="flex flex-wrap gap-6 mb-8">
            <div class="bg-dark-card rounded-xl p-6 card-shadow flex-1 min-w-[200px]">
              <div class="flex items-start justify-between">
                <div>
                  <p class="text-gray-400 text-sm font-medium">总项目数</p>
                  <h3 class="text-3xl font-bold text-white mt-1">12</h3>
                  <p class="text-success text-sm mt-2 flex items-center">
                    <i class="fa fa-arrow-up mr-1"></i> 3 个 (本月)
                  </p>
                </div>
                <div class="w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
                  <i class="fa fa-folder-open text-xl"></i>
                </div>
              </div>
            </div>

            <div class="bg-dark-card rounded-xl p-6 card-shadow flex-1 min-w-[200px]">
              <div class="flex items-start justify-between">
                <div>
                  <p class="text-gray-400 text-sm font-medium">测试用例</p>
                  <h3 class="text-3xl font-bold text-white mt-1">247</h3>
                  <p class="text-success text-sm mt-2 flex items-center">
                    <i class="fa fa-arrow-up mr-1"></i> 18 个 (本周)
                  </p>
                </div>
                <div class="w-12 h-12 rounded-lg bg-secondary/20 flex items-center justify-center text-secondary">
                  <i class="fa fa-list-alt text-xl"></i>
                </div>
              </div>
            </div>

            <div class="bg-dark-card rounded-xl p-6 card-shadow flex-1 min-w-[200px]">
              <div class="flex items-start justify-between">
                <div>
                  <p class="text-gray-400 text-sm font-medium">今日执行</p>
                  <h3 class="text-3xl font-bold text-white mt-1">36</h3>
                  <div class="flex items-center mt-2 space-x-2">
                    <span class="text-success text-sm flex items-center"><i class="fa fa-check-circle mr-1"></i> 28</span>
                    <span class="text-danger text-sm flex items-center"><i class="fa fa-times-circle mr-1"></i> 8</span>
                  </div>
                </div>
                <div class="w-12 h-12 rounded-lg bg-warning/20 flex items-center justify-center text-warning">
                  <i class="fa fa-play-circle text-xl"></i>
                </div>
              </div>
            </div>

            <div class="bg-dark-card rounded-xl p-6 card-shadow flex-1 min-w-[200px]">
              <div class="flex items-start justify-between">
                <div>
                  <p class="text-gray-400 text-sm font-medium">未解决缺陷</p>
                  <h3 class="text-3xl font-bold text-white mt-1">14</h3>
                  <p class="text-danger text-sm mt-2 flex items-center">
                    <i class="fa fa-arrow-up mr-1"></i> 2 个 (今日)
                  </p>
                </div>
                <div class="w-12 h-12 rounded-lg bg-danger/20 flex items-center justify-center text-danger">
                  <i class="fa fa-bug text-xl"></i>
                </div>
              </div>
            </div>
          </div>
          <!-- Charts and Project List -->
            <div class="flex flex-wrap gap-6 mb-8">
              <!-- Test Execution Trend -->
              <div class="w-full lg:w-[66.67%] bg-dark-card rounded-xl p-6 card-shadow">
                <div class="flex items-center justify-between mb-6">
                  <h3 class="text-lg font-semibold text-white">测试执行趋势</h3>
                  <div class="flex space-x-2">
                    <button class="px-3 py-1 text-xs bg-primary/10 text-primary rounded-full hover:bg-primary/20 custom-transition-colors">周</button>
                    <button class="px-3 py-1 text-xs bg-gray-700 text-gray-300 rounded-full hover:bg-gray-600 custom-transition-colors">月</button>
                    <button class="px-3 py-1 text-xs bg-gray-700 text-gray-300 rounded-full hover:bg-gray-600 custom-transition-colors">年</button>
                  </div>
                </div>
                <!-- 为图表容器添加明确的样式，确保有固定的宽高 -->
                <div class="h-64">
                  <div ref="executionTrendChart" class="w-full h-full"></div>
                </div>
              </div>
       

              <!-- Test Case Status -->
              <div class="w-full lg:w-[33.33%] bg-dark-card rounded-xl p-6 card-shadow">
                <h3 class="text-lg font-semibold text-white mb-6">用例状态分布</h3>
                <div class="h-64 flex items-center justify-center">
                  <div ref="caseStatusChart"></div>
                </div>
                <div class="grid grid-cols-2 gap-4 mt-4">
                  <div class="flex items-center space-x-2">
                    <span class="w-3 h-3 rounded-full bg-success"></span>
                    <span class="text-sm text-gray-300">通过 (68%)</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <span class="w-3 h-3 rounded-full bg-danger"></span>
                    <span class="text-sm text-gray-300">失败 (12%)</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <span class="w-3 h-3 rounded-full bg-warning"></span>
                    <span class="text-sm text-gray-300">阻塞 (8%)</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <span class="w-3 h-3 rounded-full bg-gray-500"></span>
                    <span class="text-sm text-gray-300">未执行 (12%)</span>
                  </div>
                </div>
              </div>
            </div>
          
          <!-- ECharts 测试组件 -->
          <div class="mb-8">
            <h3 class="text-lg font-semibold text-white mb-4">ECharts 测试组件</h3>
            <EChartsTest />
          </div>

          <!-- Recent Projects -->
          <div class="bg-dark-card rounded-xl p-6 card-shadow">
            <div class="flex items-center justify-between mb-6">
              <h3 class="text-lg font-semibold text-white">最近项目</h3>
              <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full min-w-[640px]">
                <thead>
                  <tr class="border-b border-gray-700">
                    <th class="text-left py-3 px-4 text-sm font-medium text-gray-400">项目名称</th>
                    <th class="text-left py-3 px-4 text-sm font-medium text-gray-400">测试集</th>
                    <th class="text-left py-3 px-4 text-sm font-medium text-gray-400">用例数</th>
                    <th class="text-left py-3 px-4 text-sm font-medium text-gray-400">最近执行</th>
                    <th class="text-left py-3 px-4 text-sm font-medium text-gray-400">状态</th>
                    <th class="text-right py-3 px-4 text-sm font-medium text-gray-400">操作</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-gray-700">
                  <tr class="hover:bg-dark-hover/50 transition-colors">
                    <td class="py-4 px-4">
                      <div class="flex items-center">
                        <div class="w-8 h-8 rounded-md bg-primary/20 flex items-center justify-center mr-3">
                          <i class="fa fa-shopping-cart text-primary"></i>
                        </div>
                        <div>
                          <div class="text-sm font-medium text-white">电商平台UI自动化</div>
                          <div class="text-xs text-gray-400">last updated: 今天 14:30</div>
                        </div>
                      </div>
                    </td>
                    <td class="py-4 px-4 text-sm text-gray-300">6 个测试集</td>
                    <td class="py-4 px-4 text-sm text-gray-300">87</td>
                    <td class="py-4 px-4 text-sm text-gray-300">今天 10:15</td>
                    <td class="py-4 px-4">
                      <span class="px-2 py-1 text-xs rounded-full bg-success/20 text-success">通过</span>
                    </td>
                    <td class="py-4 px-4 text-right">
                      <button class="text-gray-400 hover:text-white mr-3"><i class="fa fa-ellipsis-v"></i></button>
                    </td>
                  </tr>
                  <tr class="hover:bg-dark-hover/50 transition-colors">
                    <td class="py-4 px-4">
                      <div class="flex items-center">
                        <div class="w-8 h-8 rounded-md bg-secondary/20 flex items-center justify-center mr-3">
                          <i class="fa fa-link text-secondary"></i>
                        </div>
                        <div>
                          <div class="text-sm font-medium text-white">供应链管理系统</div>
                          <div class="text-xs text-gray-400">last updated: 昨天 09:45</div>
                        </div>
                      </div>
                    </td>
                    <td class="py-4 px-4 text-sm text-gray-300">4 个测试集</td>
                    <td class="py-4 px-4 text-sm text-gray-300">52</td>
                    <td class="py-4 px-4 text-sm text-gray-300">昨天 16:30</td>
                    <td class="py-4 px-4">
                      <span class="px-2 py-1 text-xs rounded-full bg-warning/20 text-warning">部分通过</span>
                    </td>
                    <td class="py-4 px-4 text-right">
                      <button class="text-gray-400 hover:text-white mr-3"><i class="fa fa-ellipsis-v"></i></button>
                    </td>
                  </tr>
                  <tr class="hover:bg-dark-hover/50 transition-colors">
                    <td class="py-4 px-4">
                      <div class="flex items-center">
                        <div class="w-8 h-8 rounded-md bg-danger/20 flex items-center justify-center mr-3">
                          <i class="fa fa-file-text text-danger"></i>
                        </div>
                        <div>
                          <div class="text-sm font-medium text-white">财务报表系统API</div>
                          <div class="text-xs text-gray-400">last updated: 2025/8/28</div>
                        </div>
                      </div>
                    </td>
                    <td class="py-4 px-4 text-sm text-gray-300">3 个测试集</td>
                    <td class="py-4 px-4 text-sm text-gray-300">41</td>
                    <td class="py-4 px-4 text-sm text-gray-300">2025/8/29</td>
                    <td class="py-4 px-4">
                      <span class="px-2 py-1 text-xs rounded-full bg-danger/20 text-danger">失败</span>
                    </td>
                    <td class="py-4 px-4 text-right">
                      <button class="text-gray-400 hover:text-white mr-3"><i class="fa fa-ellipsis-v"></i></button>
                    </td>
                  </tr>
                  <tr class="hover:bg-dark-hover/50 transition-colors">
                    <td class="py-4 px-4">
                      <div class="flex items-center">
                        <div class="w-8 h-8 rounded-md bg-warning/20 flex items-center justify-center mr-3">
                          <i class="fa fa-users text-warning"></i>
                        </div>
                        <div>
                          <div class="text-sm font-medium text-white">用户管理系统</div>
                          <div class="text-xs text-gray-400">last updated: 2025/8/25</div>
                        </div>
                      </div>
                    </td>
                    <td class="py-4 px-4 text-sm text-gray-300">2 个测试集</td>
                    <td class="py-4 px-4 text-sm text-gray-300">29</td>
                    <td class="py-4 px-4 text-sm text-gray-300">2025/8/26</td>
                    <td class="py-4 px-4">
                      <span class="px-2 py-1 text-xs rounded-full bg-success/20 text-success">通过</span>
                    </td>
                    <td class="py-4 px-4 text-right">
                      <button class="text-gray-400 hover:text-white mr-3"><i class="fa fa-ellipsis-v"></i></button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
import EChartsTest from '../components/EChartsTest.vue';

// 使用 ref 来获取 DOM 元素
const executionTrendChart = ref<HTMLElement>();
const caseStatusChart = ref<HTMLElement>();
const router = useRouter();

// 存储图表实例，方便后续操作和清理
let trendChartInstance: echarts.ECharts | null = null;
let statusChartInstance: echarts.ECharts | null = null;

// 打开任务管理页面的方法
const openTaskManager = () => {
  router.push('/task-manager');
};

onMounted(() => {
  // 使用 nextTick 和 setTimeout 确保 DOM 完全加载
  nextTick(() => {
    setTimeout(() => {
      initCharts();
    }, 500);
  });
});

// 初始化图表的函数
function initCharts() {
  try {
    // 确保 DOM 元素存在
    if (!executionTrendChart.value || !caseStatusChart.value) {
      console.warn('图表容器元素不存在');
      return;
    }

    // 测试执行趋势图表 - 完全匹配用户提供的截图样式
    trendChartInstance = echarts.init(executionTrendChart.value);
    
    // 为图表容器设置明确的样式
    executionTrendChart.value.style.width = '100%';
    executionTrendChart.value.style.height = '100%';
    
    // 完整的图表配置，确保显示与用户提供的截图一致
    trendChartInstance.setOption({
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        borderColor: '#4b5563',
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        data: ['通过', '失败'],
        textStyle: {
          color: '#fff'
        },
        top: 10,
        right: 20,
        icon: 'circle',
        itemWidth: 8,
        itemHeight: 8
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLine: {
          lineStyle: {
            color: '#555'
          }
        },
        axisLabel: {
          color: '#fff'
        },
        axisTick: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        max: 35,
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#555'
          }
        },
        axisLabel: {
          color: '#fff'
        }
      },
      series: [
        {
          name: '通过',
          type: 'line',
          data: [20, 22, 25, 35, 33, 18, 30],
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#52C41A'
          },
          lineStyle: {
            color: '#52C41A',
            width: 3
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(82, 196, 26, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(82, 196, 26, 0.05)'
              }
            ])
          },
          emphasis: {
            itemStyle: {
              color: '#52C41A',
              borderColor: '#fff',
              borderWidth: 2
            }
          }
        },
        {
          name: '失败',
          type: 'line',
          data: [5, 5, 7, 8, 6, 4, 8],
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#FF4D4F'
          },
          lineStyle: {
            color: '#FF4D4F',
            width: 3
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255, 77, 79, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(255, 77, 79, 0.05)'
              }
            ])
          },
          emphasis: {
            itemStyle: {
              color: '#FF4D4F',
              borderColor: '#fff',
              borderWidth: 2
            }
          }
        }
      ]
    });
    
    console.log('测试执行趋势图表初始化成功');
      
    // 用例状态分布图表 - 完全匹配用户提供的截图样式
    statusChartInstance = echarts.init(caseStatusChart.value);
    
    // 为图表容器设置明确的样式
    caseStatusChart.value.style.width = '100%';
    caseStatusChart.value.style.height = '100%';
    
    // 完整的饼图配置
    statusChartInstance.setOption({
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        borderColor: '#4b5563',
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        orient: 'horizontal',
        bottom: 10,
        left: 'center',
        data: ['通过', '失败', '阻塞', '未执行'],
        textStyle: {
          color: '#fff',
          fontSize: 12
        },
        itemWidth: 12,
        itemHeight: 12
      },
      series: [
        {
          name: '用例状态',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          center: ['50%', '45%'],
          itemStyle: {
            borderRadius: 0,
            borderColor: '#1F2937', // 匹配深色背景
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: 'bold',
              color: '#fff'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: 68,
              name: '通过',
              itemStyle: {
                color: '#52C41A'
              }
            },
            {
              value: 12,
              name: '失败',
              itemStyle: {
                color: '#FF4D4F'
              }
            },
            {
              value: 8,
              name: '阻塞',
              itemStyle: {
                color: '#FAAD14'
              }
            },
            {
              value: 12,
              name: '未执行',
              itemStyle: {
                color: '#8C8C8C'
              }
            }
          ]
        }
      ]
    });
    
    console.log('用例状态分布图表初始化成功');
    
    // 添加窗口大小变化监听
    const handleResize = () => {
      if (trendChartInstance) {
        trendChartInstance.resize();
      }
      if (statusChartInstance) {
        statusChartInstance.resize();
      }
    };
    
    window.addEventListener('resize', handleResize);
    
    // 在组件卸载时清理事件监听和图表实例
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
      if (trendChartInstance) {
        trendChartInstance.dispose();
        trendChartInstance = null;
      }
      if (statusChartInstance) {
        statusChartInstance.dispose();
        statusChartInstance = null;
      }
    });
  } catch (error) {
    console.error('图表初始化失败:', error);
  }
}

// 使用 nextTick 和 setTimeout 确保 DOM 完全加载
onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      initCharts();
    }, 300); // 延迟300毫秒初始化
  });
});
</script>

<style scoped>
.card-shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* 确保侧边栏和主内容区域正确布局 */
.flex-1 {
  flex: 1;
}

/* 确保卡片阴影效果与原型一致 */
.bg-dark-card {
  background-color: #272E3B;
}

/* 确保按钮的悬停效果 */
button:hover {
  transition: all 0.2s ease-in-out;
}
</style>